<template>
  <div class="content">
    <!-- {{ form }} -->
    <TitleComponent mainTitle="用户" :subTitle="subTitle" />
    <div class="box">
      <div class="box_header">
        <div class="box_title">{{subTitle}}</div>
        <div class="pull-right">
          <el-button type="primary" :icon="Operation" @click="backTolist">列表</el-button>
        </div>
      </div>
      <avue-form ref="formRef" :option="option" v-model="form" @submit="handleSubmit"></avue-form>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { Operation } from "@element-plus/icons-vue";
import TitleComponent from '@/components/title/index.vue';
import { useRouter,useRoute } from 'vue-router';

// 外部传递的列定义数组

// 路由带参数过来

/**
 * 列定义数组示例
 * 每个对象表示一个表单字段的定义
 *
 * @typedef {Object} ColumnDefinition
 * @property {string} label - 列标题
 * @property {string} prop - 对应的数据属性名
 * @property {string} [type] - 输入类型，默认为文本输入
 * @property {number} [step] - 步长（如果适用于数值类型）
 * @property {boolean} [stepStrictly] - 数值
 * @property {number} [offset] - 布局偏移量
 * @property {number} [span] - 栅格占据的列数
 * @property {boolean} [row] - 是否单独一行显示
 * @property {number} [min] - 输入值的最小限制
 * @property {string} [listType] - 上传图片时使用的图片类型
 */


// 跳转路由
const router = useRouter();
const route = useRoute();
const subTitle = ref("创建");

const backTolist = () => {
  router.push('/user/userinfo');
}

const externalColumns = ref([
  {
    label: "代理编号",
    prop: "AgentNumber",
    type: "input",
    step: 1,
    stepStrictly: true,
    offset: 4,
    span: 6,
    row: true,
    min: 0,
  },
  {
    label: "上级编号",
    prop: "SuperiorNo",
    type: "input",
    step: 1,
    stepStrictly: true,
    offset: 4,
    span: 6,
    row: true,
    min: 0,
  },
  {
    label: "用户昵称",
    prop: "name",
    offset: 4,
    row: true,
    rules: [
      {
        required: true,
        message: '输入用户昵称',
        trigger: 'blur',
      },
    ],
  },
  {
    label: "用户手机号",
    prop: "phone",
    offset: 4,
    labelWidth: '10px',
    span: 24,
    row: true,
    rules: [
      {
        required: true,
        message: '输入用户手机号',
        trigger: 'blur',
      },
    ],
  },
  {
    label: "等级",
    prop: "Level",
    type: "select",
    filterable: true,
    offset: 4,
    row: true,
    dicData: [
      { label: 'VIP1', value: 1 },
      { label: 'VIP2', value: 2 },
      { label: 'VIP3', value: 3 }
    ],
  },
  {
    label: "密码",
    prop: "password",
    type: "password",
    offset: 4,
    row: true,
  },
  {
    label: "安全密码",
    prop: "securityPassword",
    type: "password",
    offset: 4,
    row: true,
  },
  {
    label: "头像",
    prop: "avatar",
    type: "upload",
    listType: "picture-img",
    offset: 4,
    row: true,
  },
  {
    label: "禁止提现",
    prop: "disableWithdrawal",
    type: "switch",
    offset: 4,
    row: true,
    value: 0,
  },
  {
    label: "禁用用户",
    prop: "disableUser",
    type: "switch",
    offset: 4,
    row: true,
    value: 0,
  },
  {
    label: "禁用刷单",
    prop: "Fakeorders",
    type: "switch",
    offset: 4,
    row: true,
    value: 0,
  },
  {
    label: "提现地址",
    prop: "withdrawalAddress",
    offset: 4,
    row: true,
  },
  {
    label: "创建时间",
    prop: "createtime",
    offset: 4,
    row: true,
    value: new Date().toISOString().slice(0, 19).replace('T', ' '),
    disabled: true
  },
]);

const form = ref({});
const option = ref({});

const handleSubmit = (formData, done) => {
  console.log(formData);
  done();
};

// 监听外部传递列定义数组的变化
watchEffect(() => {
  option.value = {
    column: externalColumns.value.map((column) => ({
      label: column.label,
      prop: column.prop,
      type: column.type,
      listType: column.listType,
      offset: 4, // 可根据需要设置其他默认值
      row: true,
      min: column.min, //最小值
      value: column.value,
      disabled: column.disabled, // 禁用
      dicData: column.dicData,
      filterable: column.filterable,
      rules: column.rules,
      labelWidth: column.labelWidth,
      // span: column.span,
    })),
  };



  // 根据外部列定义动态设置表单初始值
  form.value = {};
  externalColumns.value.forEach((column) => {
    // console.log(column.prop)
    // form.value[column.prop] = ""; // 根据prop属性初始化表单值
  });
});

// 检查路由参数并调用API请求
onMounted(() => {
  const { index } = route.query;
  if (index) {
    subTitle.value = "编辑";
    // 调用API接口获取数据
  }
});


</script>

<style scoped>
.content {
  background-color: #eff1f7;
}


.box {
  margin: 0 20px;
}

.box_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 30px; */
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #f4f4f4;
  background-color: white;
}

.box_title {
  font-size: 16px;
  line-height: 30px;
}

::v-deep .el-collapse-item__content {
  padding-top: 50px !important;
}
</style>
